<template>
  <div>
    <!-- 跑马灯 -->
    <div class="block">
      <el-carousel :interval="3000" type="card">
        <el-carousel-item v-for="item in imgArr" :key="item.title">
          <img :src="item.url" alt="您的浏览器不支持" style="width:100%" :title="item.title">
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      imgArr: [
        {
          url: 'https://uploadstatic.mihoyo.com/contentweb/20210817/2021081721213499357.png',
          title: '艾莉西雅'
        },
        {
          url: 'https://uploadstatic.mihoyo.com/contentweb/20210804/2021080419123130780.png',
          title: '薪炎之律者'
        },
        {
          url: 'https://uploadstatic.mihoyo.com/contentweb/20210804/2021080419091567049.png',
          title: '薪炎！伐烬'
        },
        {
          url: 'https://uploadstatic.mihoyo.com/contentweb/20200824/2020082415023618402.png',
          title: '雷之律者'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.el-carousel {
  margin: 30px;
}
.el-carousel-item {
  width: 500px!important;
}
</style>
